<template>
  <div id="sceneViewer" class="scene-viewer"></div>
</template>

<script>
// import Viewer from '@/cesium/SceneViewer';
import * as Cesium from 'cesium/Cesium';

// 引用cesium style
require('cesium/Widgets/widgets.css');

export default {
  mounted() {
    // eslint-disable-next-line no-unused-vars
    const viewer = new Cesium.Viewer('sceneViewer', {
      animation: false, // 动画小部件
      baseLayerPicker: false, // 图层选择器
      fullscreenButton: false, // 全屏按钮
      geocoder: false, // 地理编码器
      homeButton: false, // 初始位置
      infoBox: false, // 信息框
      sceneModePicker: false, // 场景信息选择
      timeline: false, // 时间轴部件
      selectionIndicator: false, // 选择指示器
      navigationHelpButton: false, // 导航帮助
      skyBox: false, // 用来渲染星星的天空盒。 未定义时，将使用默认星号。
      skyAtmosphere: new Cesium.SkyAtmosphere(), // 蓝天，以及地球四肢的光芒。设置为 false 将其关闭。
      // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      //   url: `https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}`, // 全球底图
      //   format: 'tiles',
      //   tileMatrixSetID: '3857',
      //   tilingScheme: new Cesium.GeographicTilingScheme(),
      //   style: 'default',
      //   layer: 'ChinaOnlineStreetPurplishBlue'
      // }),
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer' // 重庆,
      }),
      orderIndependentTranslucency: false,
      contextOptions: {
        webgl: {
          alpha: true
        }
      } //
    });
    window.viewer = viewer;
    const imageryProviderMonde = viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapTileServiceImageryProvider({
        url:
          'https://maps.ynmap.cn/arcgis/rest/services/TdtYn/tdtYnVectorMap2000/MapServer/WMTS/tile/1.0.0/TDT_SLDT/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',
        layer: '',
        style: 'default',
        tileMatrixSetID: 'default028mm',
        format: 'image/png',
        tilingScheme: new Cesium.GeographicTilingScheme(),
        maximumLevel: 21,
        tileMatrixLabels: [
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8',
          '9',
          '10',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
          '20',
          '21'
        ]
      })
    );
    // viewer.flyTo(imageryProviderMonde, 0);
    //  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 800000; // 相机高度的最大值
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000; // 相机高度的最小值
  }
};
</script>

<style scoped lang="scss">
.scene-viewer {
  height: 100%;
}
</style>
